<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合租详情</title>

    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/footer.css}">
    <link rel="stylesheet" th:href="@{/airent/css/roomatedesc.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap-star-rating-master/css/star-rating.min.css}">

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=nGGIg5o99yFrRmVRM5sgX9LUi39ObA3Y"></script>
    <script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
    <script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
    <script th:src="@{/airent/js/iconfont.js}"></script>


        <!-- <link rel="shortcut icon" href="favicon.ico"> <link href="../plugins/H+/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"> -->
        <link th:href="@{/airent/plugins/H+/css/font-awesome.css?v=4.4.0}" rel="stylesheet">
        <link th:href="@{/airent/plugins/H+/css/plugins/blueimp/css/blueimp-gallery.min.css}" rel="stylesheet">
        <link th:href="@{/airent/plugins/H+/css/animate.css}" rel="stylesheet">
        <link th:href="@{/airent/plugins/H+/css/animate.css}" rel="stylesheet">
        <link th:href="@{/airent/plugins/H+/css/style.css?v=4.1.0}" rel="stylesheet">
        <link rel="stylesheet" th:href="@{/airent/plugins/font-awesome-4.7.0/css/font-awesome.css}">


        <!-- 全局js -->
        <script th:src="@{/airent/plugins/H+/js/jquery.min.js?v=2.1.4}"></script>
        <script th:src="@{/airent/plugins/H+/js/bootstrap.min.js?v=3.3.6}"></script>

        <!-- 自定义js -->
        <script th:src="@{/airent/plugins/H+/js/content.js?v=1.0.0}"></script>

        <!-- blueimp gallery -->
        <script th:src="@{/airent/plugins/H+/js/plugins/blueimp/jquery.blueimp-gallery.min.js}"></script>

        <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
    <style>
        .a{
            -webkit-box-shadow: 0 0 0 1000px white inset;
            border: 0px;
            outline: 0px;
        }
        #gender{
            background-color: rgb(209,218,222);
            border: 0px;
            outline: 0px;
            width: 60px;
        }
    </style>

</head>
<body>

    <!-- 导航栏 -->
    <div th:replace="~{head/topbar::topBar}"></div>

    <div class="container">
        <form th:object="${house}">
      <div class="row">
        <div class="col-9">
          <div class="container">

            <div class="report">
              <a id="report" th:href="@{/report(houseNumber=${houseNumber})}"> 虚假房源? 点我举报</a>
            </div>

            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#introduction" >房屋简介</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" th:href="@{#picture}" >房屋图片</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" th:href="@{#facility}" >设施介绍</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#map">周边环境</a>
              </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">

                    <div id="introduction" class="container tab-pane active"><br>
                        <h1 >
                            <span>
                                <input class="a" type="text" th:value="*{houseDto.villageName}" readonly >
                                <input class="a" type="text" th:value="*{houseDto.houseType}" readonly >
                                <input class="a" type="text" th:value="*{houseDto.orientation}" readonly >
                                <span class="badge badge-secondary" th:text="*{roommateGender}"></span>
                            </span>
                            <span class="price"><input class="a" th:value="*{cotenancyPrice}" style="color: red;text-align: right" readonly>/月</span>
                        </h1>

                        <hr>

                        <h3>基本信息</h3>

                        <div class="int">
                            <a href="#" class="collect">
                                <i class="fa fa-heart">关注</i>
                            </a>
                            <div>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">房源编号:<span th:text="*{houseNumber}"></span></li>

                                </ul>
                                <div class="row">
                                    <div class="col-md-10 offset-md-1 row">
                                        <div class="base-message col-md-6">
                                            <label>楼层：<span th:text="*{houseDto.floor}"></span></label>
                                        </div>
                                        <div class="base-message col-md-6">
                                            <label>朝向：<span th:text="*{houseDto.orientation}"></span></label>
                                        </div>
                                        <div class="base-message col-md-6" >
                                            <label th:if="*{houseDto.elvator} eq '1'">电梯：有</label>
                                            <label th:if="*{houseDto.elvator} ne '1'">电梯：无</label>
                                        </div>
                                        <div class="base-message col-md-6">
                                            <label>押付方式：<span th:text="*{houseDto.payment}"></span></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <br>

                        <h3>房屋介绍</h3>
                        <br>
                        <p class="dis" th:text="*{content}"></p>
                    </div>

                    <div id="picture" class="container tab-pane active"><br>
                        <h3>房屋图片</h3>
                        <hr>
                        <div class="lightBoxGallery" >
                            <div class="row">
                                <div class="col-sm-3" th:each="img:${img}">
                                    <a th:href="${img.imgPath}" title="图片" data-gallery=""><img th:src="${img.imgPath}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                                </div>
                            </div>

                        </div>

                        <div id="blueimp-gallery" class="blueimp-gallery">
                            <div class="slides"></div>
                            <h3 class="title"></h3>
                            <a class="prev">‹</a>
                            <a class="next">›</a>
                            <a class="close">×</a>
                            <a class="play-pause"></a>
                            <ol class="indicator"></ol>
                        </div>
                    </div>

                    <div id="facility" class="container tab-pane active"><br>
                        <h3>设施介绍</h3>
                        <hr>
                        <div class="container">
                            <div class="row">
                                <div class="col">
                                    <div id="equip" class="card">
                                        <div class="card-header"><h5>房屋设施</h5></div>
                                        <div class="card-body">
                                            <div class="container">
                                                <div class="row" >
                                                    <div class="col-sm-2" th:each="i : ${item}">
                                                        <div class="icon-img">
                                                            <svg class="icon" aria-hidden="true">
                                                                <use th:href="${i.itemPath}"></use>
                                                            </svg>
                                                        </div>
                                                        <div class="icon-name" th:text="${i.itemName}"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div id="charge" class="card">
                                        <div class="card-header"><h5>额外缴费</h5></div>
                                        <div class="card-body">
                                            <div class="container">
                                                <div class="row">
                                                    <div class="col-sm-2" th:each="e:${extra}">
                                                        <div class="icon-img">
                                                            <svg class="icon" aria-hidden="true">
                                                                <use th:href="${e.extraPath}"></use>
                                                            </svg>
                                                        </div>
                                                        <div class="icon-name" th:text="${e.extraName}"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>

                    <div id="map" class="container tab-pane active"><br>
                        <h3>周边地图</h3>
                        <hr>
                        <p>房屋地址: xxx省<span th:text="*{houseDto.houseArea}"></span>xx区
                            <span th:text="*{houseDto.villageName}"></span>
                            <span th:text="*{houseDto.detailedAddress}"></span>
                        </p>
                        <div id="map-box" class="card-body text-dark">
                            <div id="container"></div>
                        </div>
                    </div>




            </div>
          </div>
        </div>
        <div class="col-3">
          <div class="card" id="" style="width: 15rem;">
            <img th:src="@{/airent/imgs/cat.jpg}" class="card-img-top">
            <div class="card-body">
              <div>
                <h5 class="card-title" th:text="*{userDto.realName}"></h5>
                <hr>
              </div>
              <div>
                <p class="card-text" th:text="*{introduce}"></p>
                <hr>
              </div>
              <div>
                <p> 电话: <span th:text="*{userTel}"></span></p>
                <a href="#" class="btn">联系我</a>
              </div>

            </div>
          </div>
        </div>
      </div>
        </form>
    </div>

    <!-- 底部 -->
    <div th:replace="~{food/bottombar::topBar}"></div>


    <script type="text/javascript">
      var map = new BMap.Map("container");
      // 创建地图实例
      var point = new BMap.Point(116.404, 39.915);
      // 创建点坐标
      map.centerAndZoom(point, 14);
      // 初始化地图，设置中心点坐标和地图级别
      window.onload= function locationcity() {
            function myFun(result) {
                var cityName = result.name;
                var outer = document.getElementById("cityname");
                map.setCenter(cityName);
                outer.innerText = cityName;
            }
            var myCity = new BMap.LocalCity();
            myCity.get(myFun);
        }

      $("input").each(function(i){
          var input_size = $(this).val().length;
          this.size=input_size;
      });
    </script>

</body>
</html>
